<template>
  <div>
    <a-form>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="取件时间" required>
        <a-cascader :options="options" placeholder="请选择" @change="onChange" />
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="取件地址" required>
        <p v-if="address">
          <span>{{ address.contactName }}</span
          ><a-divider type="vertical" /><span>{{ address.contactPhone }}</span
          ><a-divider type="vertical" /><span>{{ address.province }} {{ address.city }} {{ address.district }} {{ address.address }}</span
          ><span class="btn" style="margin-left: 12px"><a @click="changeAdds">更换</a></span>
        </p>
        <p v-else>无收件地址</p>
      </a-form-item>
    </a-form>
    <Address ref="address" :unionId="unionId" :defLogistic="address" @newAddress="newAddress" :title="'取件地址'"></Address>
  </div>
</template>
<script>
import Address from '@/views/box/components/Address/AddressList'
import { returnTime } from '@/api/box/order'
export default {
  components: {
    Address,
  },
  props: {
    unionId: {
      type: String,
      default: '',
    },
    defLogistic: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      labelCol: {
        xs: { span: 3 },
        sm: { span: 3 },
      },
      wrapperCol: {
        xs: { span: 20 },
        sm: { span: 20 },
      },
      address: {},
      options: [],
      dateList: [],
      timeList: [],
      defaultTime: [
        { value: '08:00', label: '08:00' },
        { value: '09:00', label: '09:00' },
        { value: '10:00', label: '10:00' },
        { value: '11:00', label: '11:00' },
        { value: '12:00', label: '12:00' },
        { value: '13:00', label: '13:00' },
        { value: '14:00', label: '14:00' },
        { value: '15:00', label: '15:00' },
        { value: '16:00', label: '16:00' },
        { value: '17:00', label: '17:00' },
      ],
    }
  },
  watch: {
    defLogistic(val) {
      this.address = val
    },
  },
  mounted() {
    this.getTime()
  },
  methods: {
    // 更新地址
    newAddress(record) {
      this.address = record
      this.$emit('changeAddress', record)
    },
    changeAdds() {
      this.$refs.address.show()
    },
    getTime() {
      returnTime()
        .then((res) => {
          if (res.code == 0) {
            this.timeList = res.data.timeList
            this.dateList = res.data.dateList
            for (let item of this.dateList) {
              let obj = {
                label: item,
                value: item,
                children: this.defaultTime,
              }
              this.options.push(obj)
            }
            if (this.timeList.length > 0 && this.dateList.length == 3) {
              let timeObj = []
              for (let time of this.timeList) {
                let obj = { label: time, value: time }
                timeObj.push(obj)
              }
              this.options[0].children = timeObj
            }
            console.log(this.options)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 选择时间
    onChange(value) {
      // console.log(value)
      this.$emit('changePickTime', value)
    },
  },
}
</script>
